<!--
 * @Author: Lu junwen
 * @Date: 2022-03-13 18:14:37
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-21 01:36:35
 * @FilePath: \vue-shop-app-customer\src\views\Order\OrderDetail.vue
-->
<template>
  <div class="detail">
    <div class="header">
      <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div class="info">
        <van-cell title="服务地址" icon="location-o" size="large" center>
          <template #label>
            <van-row gutter="40">
              <van-col span="16">姓名：{{ order.order_fapiao_company }}</van-col>
              <van-col span="14">电话：{{ order.order_fapiao_content }}</van-col>
              <van-col span="23">地址：{{ order.consignee_addr }}</van-col>
            </van-row>
          </template>
        </van-cell>
      </div>
      <div class="goods">
        <van-cell title="商品信息" icon="balance-list-o" size="large">
          <template #label>
            <div class="goods_card" v-for="good in order.goods" :key="good.id">
              <van-card
                :num="good.goods_number"
                :price="good.goods_price"
                :title="good.goods_name"
                :thumb="good.goods_pics"
                @click="toGoodDetail(good.goods_id)"
              />
            </div>
          </template>
        </van-cell>
      </div>
      <div class="status">
        <van-cell title="订单状态" icon="filter-o" size="large">
          <template #label>
            <div class="order_status">
              <div
                class="pay_status"
              >支付状态：{{ order.pay_status === "0" ? "未支付" : order.pay_status === "1" ? "已支付" : ""}}</div>
              <div class="pay_way" v-if="order.pay_status === '1'">
                支付方式：
                <img :src="payWay" />
              </div>
              <div
                class="send_status"
                v-if="order.pay_status === '1'"
              >发货状态：{{ order.is_send === "否" ? "未发货" : order.is_send === "是" ? "已发货" : ""}}</div>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      //获取订单id
      orderId: this.$route.query.id,
      order: {},

    };
  },
  computed: {
    payWay() {
      if (this.order.order_pay === '1') {
        return require('@/assets/alipay.jpg')
      } else if (this.order.order_pay === '2') {
        return require('@/assets/wechat.jpg')
      } else if (this.order.order_pay === '3') {
        return require('@/assets/yinlian.jpg')
      } else {
        return ''
      }
    }
  },
  methods: {
    //获取对应订单id的详情
    queryOrderDetail(id) {
      this.axios.get(`orders/${id}`).then(res => {
        this.order = res.data.data
        console.log(this.order);
      })
    },
    toGoodDetail(id) {
      this.$router.push({
        path: "GoodsDetail",
        query: { id }
      })
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  mounted() {
    //获取对应订单id的详情
    this.queryOrderDetail(this.orderId);
  },
};
</script>

<style lang="scss" scoped>
.info,
.goods,
.status {
  margin: 10px auto;
  box-shadow: 2px 2px 2px 2px rgba(158, 117, 255, 0.2);
  transition: 0.3s;
  width: 95%;
  border-radius: 5px;
}
.goods {
  .goods_card{
    margin-bottom: 10px;
  }
}
.status {
  margin-bottom: 70px;
  .order_status {
    div {
      margin: 5px 0;
    }
    .pay_way {
      img {
        width: 100px;
        height: 100px;
        vertical-align: text-top;
      }
    }
  }
}
/deep/ .van-icon-location-o {
  position: absolute;
  top: 12px;
  left: 16px;
}
/deep/ .van-cell--center {
  padding-left: 35px;
}
/deep/ .van-col {
  margin-top: 10px;
}
</style>